/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="live">
		<view class="live-header" @click="upLoadImg">
			<view class="cover">
				<image v-if="coverImg" mode="widthFix" :src="coverImg" />
				<i class="iconfont" v-else>&#xe67f;</i>
			</view>
		</view>
		<view class="live-body">

			<mpvue-picker ref="mpvuePicker" :mode="mode" :pickerValueDefault="pickerValueDefault" @onChange="onChange"
				@onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="getNavList?getNavList:[]">
			</mpvue-picker>

			<view class="form_items">
				<view class="items_left">
					{{$t('直播标题')}}
				</view>
				<input class="items_input" v-model="liveTitle" type="text" :placeholder="$t('请输入直播标题')" maxlength="11">
			</view>
			<view class="form_items">
				<view class="items_left">
					{{$t('直播描述')}}
				</view>
				<input class="items_input" v-model="liveDescription" type="text" :placeholder="$t('请输入直播描述')" maxlength="11">
			</view>
		</view>
		<view class="live-btn" hover-class="text-hover" @click="toLive">{{$t('发起直播')}}</view>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker'
	export default {
		data() {
			return {
				navList: [],
				mode: 'selector',
				chooseList: [],
				index: 0,
				coverImg: '',
				chooseType: {},
				liveTitle: '',
				liveDescription: '',
				cover: '',
				pickerValueDefault: [0],
			}
		},
		components: {
			mpvuePicker
		},
		onLoad() {
			if(uni.getStorageSync('coverImg') != ''){
				this.coverImg = uni.getStorageSync('coverImg')
				this.cover = uni.getStorageSync('cover')
			}
		},
		computed: {
			getNavList() {
				return this.navList.map(res => ({
					label: res.type_name,
					value: res.id
				}))
			}
		},
		methods: {

			showPicker() {
				this.$refs.mpvuePicker.show();
			},

			toLive() {
				if (!this.coverImg) {
					return this.$toast(this.$t('请上传直播封面图'))
				}
				
				if (!this.liveTitle) {
					return this.$toast(this.$t('请填写直播间标题'))
				}


				this.$http.launchlive({
					cover: this.cover,
					title: this.liveTitle,
					description: this.liveDescription
				}).then(res => {
					if (res.status === 200) {
						uni.setStorageSync('coverImg', this.coverImg)
						uni.setStorageSync('cover', this.coverImg)
						uni.setStorage({
							key: 'pushUrl',
							data: res.data,
							success: () => {
								this.getnav(`/platforms/mp-weixin/live-pusher?url=${res.data}`)
							}
						});

					}
				}).catch(err => {
					console.log(err)
				})
			},
			onConfirm(e) {
				this.chooseType = e
				this.index = e.index[0]

			},
			onChange(e) {
				this.chooseType = e
			},
			onCancel(e) {
				console.log(e);
			},
			upLoadImg() {
				const formData = this.$http.returnCommonParams('api/Common/uploadPic', 'live')
				$utils.chooseImg().then(res => {
					this.$loading(this.$t('上传中'))
					uni.uploadFile({
						url: this.$baseUrl + 'api/Common/uploadPic',
						filePath: res.tempFilePaths[0],
						name: 'file',
						formData: formData,
						success: res => {

							const data = JSON.parse(res.data)
							if (data.status === 200) {
								this.coverImg = data.data.full_path
								this.cover = data.data.path
								this.$hideLoading()
							} else {
								this.$toast(data.mess)
							}
						},
						fail: err => {
							this.$hideLoading()
						}
					})
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.pickerWrap {
		background: #fff;
	}

	.form_items {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0 24rpx;
		background: #fff;
		height: 104rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;

	}

	.items_input {
		margin-left: 30rpx;
	}

	.live-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		color: #333;
		font-size: 30rpx;
		border-bottom: 16rpx solid #f4f4f4;
		background: #fff;
		margin-top: 14rpx;

		.cover {
			position: relative;
			margin: 0 auto;
			min-height: 328rpx;

			image {
				width: 400rpx;

			}

			i {
				position: absolute;
				left: 50%;
				top: 50%;
				z-index: 1;
				color: #FCCB59;
				font-size: 144rpx;
				transform: translate(-50%, -50%);
			}

		}
	}

	.live-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 104rpx;
		padding: 0 24rpx;
		border-bottom: 1rpx solid #eee;
		background: #fff;

		.right {
			color: #999;
		}
	}

	.live-content {
		margin-top: 40rpx;

		.live-content__item {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			padding-left: 24rpx;
			color: #999;
			font-size: 24rpx;

			image {
				width: 23rpx;
				height: 23rpx;
				margin-right: 8rpx;
			}
		}
	}

	.live-btn {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		background-image: linear-gradient(to left, #ff0c0c, #ff5c5c);
		color: #ffffff;
		width: 70%;
		border-radius: 200rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		box-shadow: 0 0 10px #ff5c5c;
		font-size: 38rpx;
	}
</style>
